<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>zan-admin后台管理系统模板</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <script src="static/js/checkie&edge.js"></script>
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/css/zan-admin.min.css" rel="stylesheet">
</head>

<body>
    <header class="zan-header">
        <span class="glyphicon glyphicon-menu-hamburger zan-sidebar-toggle" aria-hidden="true"></span>
        <div class="zan-header-center">
            <div class="zan-nav-item"><a href="index.html">首页</a></div>
            <div class="zan-nav-item"><a href="platform.html">平台</a></div>
            <div class="zan-nav-item"><a href="#">商城</a></div>
            <div class="zan-nav-item"><a href="#">运营</a></div>
        </div>
        <div class="zan-avatar-wrap">
            <div class="dropdown">
                <img class="zan-avatar" data-toggle="dropdown" src="static/images/avatar.jpg" alt="头像">
                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="#">admin</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">超级管理员</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">通知 <span class="badge">10</span></a></li>
                    <li><a href="#">个人资料</a></li>
                    <li><a href="page_password.html">修改密码</a></li>
                    <li><a href="#">清空缓存</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="page_login.html">退出登录</a></li>
                </ul>
            </div>
        </div>
    </header>
    <aside class="zan-aside">
        <div class="zan-brand">
            <a href="index.html">zan-admin后台管理系统</a>
        </div>
        <ul class="zan-sidebar">
            <li>
                <a href="index.html">
                    <span class="glyphicon glyphicon-home" aria-hidden="true"></span>后台首页
                </a>
            </li>
            <li>
                <a href="fonticon.html">
                    <span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>字体图标
                </a>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>日期选择器
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_flatpickr.html">flatpickr</a></li>
                    <li><a href="plug_datetimepicker.html">datetimepicker</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-upload" aria-hidden="true"></span>文件上传
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_fileupload.html">fileupload</a></li>
                    <li><a href="plug_webuploader.html">webuploader</a></li>
                </ul>
            </li>
            <li class="haschildren open">
                <a href="#">
                    <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>图表插件
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_chart.html">chart</a></li>
                    <li><a href="plug_echarts.html">echarts</a></li>
                </ul>
            </li>

            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>富文本
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_tinymce.html">tinymce</a></li>
                    <li><a href="plug_editor.md.html">editor.md</a></li>
                    <li><a href="plug_ueditor.md.html">ueditor</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-saved" aria-hidden="true"></span>表单验证
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_formvalidation.html">formvalidation</a></li>
                    <li><a href="plug_jquery.validation.html">jquery.validation</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>其它插件
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_sweetalert.html">sweetalert</a></li>
                    <li><a href="plug_notify.html">notify</a></li>
                    <li><a href="plug_timeline.html">timeline</a></li>
                    <li><a href="plug_clipboard.html">clipboard</a></li>
                    <li><a href="plug_croppie.html">croppie</a></li>
                    <li><a href="plug_lightbox.html">lightbox</a></li>
                    <li><a href="plug_touchslider.html">touchslider</a></li>
                    <li><a href="plug_rocket.html">rocket</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-file" aria-hidden="true"></span>示例页面
                </a>
                <ul class="zan-submenu">
                    <li><a href="page_login.html" target="_blank">登录页面</a></li>
                    <li><a href="page_curd.html">CURD页面</a></li>
                    <li><a href="page_password.html">修改密码</a></li>
                    <li><a href="page_error.html" target="_blank">错误页面</a></li>
                </ul>
            </li>
        </ul>
    </aside>
    <!-- 面包屑导航 -->
    <div class="zan-breadcrumb">
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Library</a></li>
            <li class="active">Data</li>
        </ol>
    </div>

    <main class="zan-main">
        <div class="container-fluid">
            <blockquote>
                <p>更多详细内容可查阅官网</p>
                <p>官方网站:
                    <a href="https://github.com/chartjs/Chart.js">chart</a>
                </p>
                <footer>zan-admin</footer>
            </blockquote>
            <div class="row">
                <div class="col-md-6">
                    <h3 class="lead">线形图 - 1</h3>
                    <canvas id="chart-line-1"></canvas>
                </div>
                <div class="col-md-6">
                    <h3 class="lead">线形图 - 2</h3>
                    <canvas id="chart-line-2"></canvas>
                </div>
            </div>


            <div class="row">
                <div class="col-md-6">
                    <h3 class="lead">线形图 - 3</h3>
                    <canvas id="chart-line-3"></canvas>
                </div>
                <div class="col-md-6">
                    <h3 class="lead">线形图 - 4</h3>
                    <canvas id="chart-line-4"></canvas>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h3 class="lead">面积图 - 1</h3>
                    <canvas id="chart-area-1"></canvas>
                </div>
                <div class="col-md-6">
                    <h3 class="lead">面积图 - 2</h3>
                    <canvas id="chart-area-2"></canvas>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <h3 class="lead">垂直条形图 - 1</h3>
                    <canvas id="chart-vbar-1"></canvas>
                </div>
                <div class="col-md-6">
                    <h3 class="lead">垂直条形图 - 2</h3>
                    <canvas id="chart-vbar-2"></canvas>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <h3 class="lead">水平条形图 - 1</h3>
                    <canvas id="chart-hbar-1"></canvas>
                </div>
                <div class="col-md-6">
                    <h3 class="lead">水平条形图 - 2</h3>
                    <canvas id="chart-hbar-2"></canvas>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <h3 class="lead">饼图</h3>
                    <canvas id="chart-pie" height="280px"></canvas>
                </div>
                <div class="col-md-6">
                    <h3 class="lead">环形图</h3>
                    <canvas id="chart-doughnut" height="280px"></canvas>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <h3 class="lead">雷达图</h3>
                    <canvas id="chart-radar" height="280px"></canvas>
                </div>
                <div class="col-md-6">
                    <h3 class="lead">极区图</h3>
                    <canvas id="chart-polar" height="280px"></canvas>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h3 class="lead">气泡图</h3>
                    <canvas id="chart-bubble"></canvas>
                </div>
            </div>
        </div>
    </main>

    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/zan-admin.min.js"></script>
     <!-- 插件依赖 -->
     <script src="lib/Chart.min.js"></script>
     <script>
         new Chart($("#chart-line-1"), {
             type: 'line',
             data: {
                 labels: ["一月", "二月", "三月", "四月"],
                 datasets: [
                     {
                         label: "收入",
                         fill: false,
                         borderWidth: 3,
                         pointRadius: 0,
                         data: [30, 25, 35, 23]
                     }
                 ]
             },
             options: {
                 legend: {
                     display: false
                 },
             }
         });
 
 
 
         new Chart($("#chart-line-2"), {
             type: 'line',
             data: {
                 labels: ["一月", "二月", "三月", "四月"],
                 datasets: [{
                     label: "收入",
                     fill: false,
                     borderWidth: 3,
                     pointRadius: 5,
                     borderColor: "#9966ff",
                     pointBackgroundColor: "#9966ff",
                     pointBorderColor: "#9966ff",
                     pointHoverBackgroundColor: "#fff",
                     pointHoverBorderColor: "#9966ff",
                     data: [30, 25, 35, 23]
                 }]
             },
             options: {
                 legend: {
                     display: false
                 },
             }
         });
 
 
 
         new Chart($("#chart-line-3"), {
             type: 'line',
             data: {
                 labels: ["一月", "二月", "三月", "四月"],
                 datasets: [{
                     label: "收入",
                     fill: false,
                     backgroundColor: "#36a2eb",
                     borderColor: "#36a2eb",
                     borderWidth: 3,
                     pointRadius: 0,
                     data: [30, 25, 35, 23]
                 },
                 {
                     label: "支出",
                     fill: false,
                     borderColor: "#ff6384",
                     backgroundColor: "#ff6384",
                     borderWidth: 3,
                     pointRadius: 0,
                     data: [23, 29, 30, 33]
                 }]
             },
             options: {}
         });
 
 
         new Chart($("#chart-line-4"), {
             type: 'line',
             data: {
                 labels: ["一月", "二月", "三月", "四月"],
                 datasets: [{
                     label: "收入",
                     fill: false,
                     borderWidth: 3,
                     pointRadius: 4,
                     borderColor: "#36a2eb",
                     backgroundColor: "#36a2eb",
                     pointBackgroundColor: "#36a2eb",
                     pointBorderColor: "#36a2eb",
                     pointHoverBackgroundColor: "#fff",
                     pointHoverBorderColor: "#36a2eb",
                     data: [30, 25, 35, 23]
                 },
                 {
                     label: "支出",
                     fill: false,
                     borderWidth: 3,
                     pointRadius: 4,
                     borderColor: "#ff6384",
                     backgroundColor: "#ff6384",
                     pointBackgroundColor: "#ff6384",
                     pointBorderColor: "#ff6384",
                     pointHoverBackgroundColor: "#fff",
                     pointHoverBorderColor: "#ff6384",
                     data: [23, 29, 30, 33]
                 }]
             },
             options: {}
         });
 
 
         new Chart($("#chart-area-1"), {
             type: 'line',
             data: {
                 labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
                 datasets: [{
                     label: "收入",
                     backgroundColor: "rgba(51,202,185,0.5)",
                     borderWidth: 0,
                     borderColor: "rgba(0,0,0,0)",
                     data: [0, 59, 80, 58, 20, 55, 40]
                 }]
             },
             options: {
                 legend: {
                     display: false
                 },
             }
         });
 
 
 
         new Chart($("#chart-area-2"), {
             type: 'line',
             data: {
                 labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
                 datasets: [{
                     label: "收入",
                     backgroundColor: "rgba(51,202,185,0.5)",
                     borderColor: "rgba(0,0,0,0)",
                     pointBackgroundColor: "rgba(51,202,185,0.5)",
                     pointBorderColor: "#fff",
                     pointHoverBackgroundColor: "#fff",
                     pointHoverBorderColor: "rgba(51,202,185,0.5)",
                     data: [0, 59, 80, 58, 20, 55, 40]
                 },
                 {
                     label: "支出",
                     backgroundColor: "rgba(243,245,246,0.8)",
                     borderColor: "rgba(0,0,0,0)",
                     pointBackgroundColor: "rgba(243,245,246,0.8)",
                     pointBorderColor: "#fff",
                     pointHoverBackgroundColor: "#fff",
                     pointHoverBorderColor: "rgba(243,245,246,0.8)",
                     data: [28, 48, 40, 19, 86, 27, 90]
                 }]
             },
             options: {}
         });
 
 
         new Chart($("#chart-vbar-1"), {
             type: 'bar',
             data: {
                 labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
                 datasets: [{
                     label: "收入",
                     backgroundColor: "rgba(51,202,185,0.5)",
                     borderColor: "rgba(0,0,0,0)",
                     hoverBackgroundColor: "rgba(51,202,185,0.7)",
                     hoverBorderColor: "rgba(0,0,0,0)",
                     data: [10, 59, 80, 58, 20, 55, 40]
                 }]
             },
             options: {
                 scales: {
                     yAxes: [{
                         ticks: {
                             beginAtZero: true
                         }
                     }]
                 }
             }
         });
 
 
 
         new Chart($("#chart-vbar-2"), {
             type: 'bar',
             data: {
                 labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
                 datasets: [{
                     label: "收入",
                     backgroundColor: "rgba(51,202,185,0.5)",
                     borderColor: "rgba(0,0,0,0)",
                     hoverBackgroundColor: "rgba(51,202,185,0.7)",
                     hoverBorderColor: "rgba(0,0,0,0)",
                     data: [10, 59, 80, 58, 20, 55, 40]
                 },
                 {
                     label: "支出",
                     backgroundColor: "rgba(243,245,246,0.8)",
                     borderColor: "rgba(0,0,0,0)",
                     hoverBackgroundColor: "rgba(238,239,240,1)",
                     hoverBorderColor: "rgba(0,0,0,0)",
                     data: [28, 48, 40, 19, 86, 27, 90]
                 }]
             },
             options: {
                 scales: {
                     yAxes: [{
                         ticks: {
                             beginAtZero: true
                         }
                     }]
                 }
             }
         });
 
 
         new Chart($("#chart-hbar-1"), {
             type: 'horizontalBar',
             data: {
                 labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
                 datasets: [{
                     label: "收入",
                     backgroundColor: "rgba(51,202,185,0.5)",
                     borderColor: "rgba(0,0,0,0)",
                     hoverBackgroundColor: "rgba(51,202,185,0.7)",
                     hoverBorderColor: "rgba(0,0,0,0)",
                     data: [10, 59, 80, 58, 20, 55, 40]
                 }]
             },
             options: {
                 scales: {
                     xAxes: [{
                         ticks: {
                             beginAtZero: true
                         }
                     }]
                 }
             }
         });
 
 
         new Chart($("#chart-hbar-2"), {
             type: 'horizontalBar',
             data: {
                 labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
                 datasets: [{
                     label: "收入",
                     backgroundColor: "rgba(51,202,185,0.5)",
                     borderColor: "rgba(0,0,0,0)",
                     hoverBackgroundColor: "rgba(51,202,185,0.7)",
                     hoverBorderColor: "rgba(0,0,0,0)",
                     data: [10, 59, 80, 58, 20, 55, 40]
                 },
                 {
                     label: "支出",
                     backgroundColor: "rgba(243,245,246,0.8)",
                     borderColor: "rgba(0,0,0,0)",
                     hoverBackgroundColor: "rgba(238,239,240,1)",
                     hoverBorderColor: "rgba(0,0,0,0)",
                     data: [28, 48, 40, 19, 86, 27, 90]
                 }]
             },
             options: {
                 scales: {
                     xAxes: [{
                         ticks: {
                             beginAtZero: true
                         }
                     }]
                 }
             }
         });
 
 
         new Chart($("#chart-pie"), {
             type: 'pie',
             data: {
                 labels: ["红色", "蓝色", "橙色"],
                 datasets: [{
                     data: [300, 50, 100],
                     backgroundColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)']
                 }]
             },
             options: {
                 responsive: false
             }
         });
 
         new Chart($("#chart-doughnut"), {
             type: 'doughnut',
             data: {
                 labels: ["红色", "蓝色", "橙色"],
                 datasets: [{
                     data: [300, 50, 100],
                     backgroundColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)']
                 }]
             },
             options: {
                 responsive: false
             }
         });
 
 
 
         new Chart($("#chart-radar"), {
             type: 'radar',
             data: {
                 labels: ["饮食", "饮酒", "睡眠", "设计", "编码", "骑行", "运动"],
                 datasets: [{
                     label: "张三",
                     backgroundColor: "rgba(51,202,185,0.7)",
                     borderColor: "rgba(0,0,0,0)",
                     pointBackgroundColor: "rgba(51,202,185,0.7)",
                     pointBorderColor: "#fff",
                     pointHoverBackgroundColor: "#fff",
                     pointHoverBorderColor: "rgba(51,202,185,0.7)",
                     data: [65, 59, 90, 81, 56, 55, 40]
                 },
                 {
                     label: "李四",
                     backgroundColor: "rgba(72,176,247,0.7)",
                     borderColor: "rgba(0,0,0,0)",
                     pointBackgroundColor: "rgba(72,176,247,0.7)",
                     pointBorderColor: "#fff",
                     pointHoverBackgroundColor: "#fff",
                     pointHoverBorderColor: "rgba(72,176,247,0.7)",
                     data: [28, 48, 40, 19, 96, 27, 100]
                 }]
             },
             options: {
                 responsive: false,
                 legend: {
                     display: false
                 }
             }
         });
 
 
 
 
         new Chart($("#chart-polar"), {
             type: 'polarArea',
             data: {
                 datasets: [{
                     data: [11, 16, 7, 3, 14],
                     backgroundColor: ['rgba(255,99,132,0.95)', 'rgba(75, 192, 192, 0.95)', 'rgba(255, 159, 64, 0.95)', 'rgba(231, 233, 237, 0.95)', 'rgba(54, 162, 235, 0.95)'],
                     label: 'My dataset' // for legend
                 }],
                 labels: ["红色", "绿色", "橙色", "灰色", "蓝色"]
             },
             options: {
                 responsive: false,
                 legend: {
                     display: false
                 }
             }
         });
 
 
         new Chart($("#chart-bubble"), {
             type: 'bubble',
             data: {
                 datasets: [{
                     label: '粉红色',
                     data: [{
                         x: 8,
                         y: 24,
                         r: 18
                     },
                     {
                         x: 20,
                         y: 30,
                         r: 15
                     },
                     {
                         x: 40,
                         y: 10,
                         r: 10
                     }],
                     backgroundColor: "#ff6384",
                     hoverBackgroundColor: "#ff6384",
                 },
                 {
                     label: '蓝色',
                     data: [{
                         x: 10,
                         y: 35,
                         r: 5
                     },
                     {
                         x: 5,
                         y: 5,
                         r: 20
                     },
                     {
                         x: 30,
                         y: 15,
                         r: 10
                     }],
                     backgroundColor: "#36a2eb",
                     hoverBackgroundColor: "#36a2eb",
                 },
                 {
                     label: '黄色',
                     data: [{
                         x: 17,
                         y: 21,
                         r: 8
                     },
                     {
                         x: 25,
                         y: 15,
                         r: 12
                     },
                     {
                         x: 12,
                         y: 31,
                         r: 16
                     }],
                     backgroundColor: "#ffce56",
                     hoverBackgroundColor: "#ffce56",
                 },
                 ]
             },
             options: {
                 legend: {
                     display: false
                 },
 
                 scales: {
                     xAxes: [{
                         ticks: {
                             beginAtZero: true
                         }
                     }],
                     yAxes: [{
                         ticks: {
                             beginAtZero: true
                         }
                     }]
                 }
             }
         });
 
     </script>
</body>

</html>